<template>
    <h2 style="text-align: center;">用户信息修改</h2>
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="Info"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
    <!-- 输入框 -->
      <el-form-item label="用户名称" prop="U_LoginName">
        <el-input v-model="Info.U_LoginName" />
      </el-form-item>

      <el-form-item label="用户密码" prop="U_LoginPassword" >
        <el-input v-model="Info.U_LoginPassword" type="password"  />
      </el-form-item>

      <el-form-item label="真实姓名" prop="U_TrueName">
        <el-input v-model="Info.U_TrueName" />
      </el-form-item>

      <!-- 单选框 -->
      <el-form-item label="性别" prop="U_Sex">
        <el-radio-group v-model="Info.U_Sex">
          <el-radio :value="true">男</el-radio>
          <el-radio :value="false">女</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 出生日期 -->
      <el-form-item label="出生日期" required>
        <el-col :span="11">
          <el-form-item prop="U_Birthday">
            <el-date-picker
              v-model="Info.U_Birthday"
              type="date"
              aria-label="Pick a date"
              placeholder="请选择出生日期"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-form-item>

      <!-- 单选框 -->
      <el-form-item label="状态" prop="U_State">
        <el-radio-group v-model="Info.U_State">
          <el-radio :value="0">正常</el-radio>
          <el-radio :value="1">冻结</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 多选框的下拉框 -->
      <el-form-item label="角色" prop="UserRole">
        <el-checkbox-group v-model="UserRole">
          <el-checkbox v-for="item in InfoRole"  :value="item.Role_Id" name="type">
            {{ item.Role_Name }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <!-- 按钮 -->
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
            修改用户信息
        </el-button>
        <el-button @click="resetForm(ruleFormRef)" style="margin-right: 10px;">重置</el-button>
        <a href="/ShowUser">返回列表</a>
      </el-form-item>
    </el-form>
</template>
  
<script lang="ts" setup>
    import { reactive, ref,onMounted } from 'vue'
    import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
    import axios from 'axios'
    import { ElMessage } from 'element-plus'
    import { useRouter ,useRoute} from 'vue-router'

    const router=useRouter();
    const route=useRoute();
    //获取角色响应式数据
    const InfoRole=ref([{
        Role_Id:0,
        Role_Name: "",
    }])
    //生命周期钩子函数
    onMounted(()=>{
        GetRole();//获取角色信息
        FanTian();//反填
        GetRoleInfo();//反填角色信息
    })
    //反填角色信息
    const GetRoleInfo=()=>{
        axios.get("https://localhost:44377/api/User/GetRoleInfo?id="+route.params.id)
        .then(res=>{
            UserRole.value=res.data.Data;
        })
    }
    //反填用户信息
    const FanTian=()=>{
        axios.get("https://localhost:44377/api/User/GetUser?id="+route.params.id)
        .then(res=>{
            Info.value=res.data.Data;
            Info.value.U_Birthday=Info.value.U_Birthday.toString();
        })
    }
    //获取角色信息
    const GetRole=()=>{
        axios.get("https://localhost:44377/api/User/GetRole")
        .then(res=>{
            InfoRole.value=res.data.Data;
        })
    }
    const formSize = ref<ComponentSize>('default')
    const ruleFormRef = ref<FormInstance>()
    //修改响应式数据
    const Info:any = ref({
        U_LoginName: "",
        U_LoginPassword: "",
        U_TrueName: "",
        U_Sex: true,
        U_Birthday: "",
        U_ErrorCount: 0,
        U_State: 0,
        U_IsLock: true,
    })
    //角色响应式数据
    const UserRole=ref([])


    const locationOptions = ['Home', 'Company', 'School']
    //验证
    const rules = reactive<FormRules>({
        U_LoginName: [
            { required: true, message: '用户名称不能为空！', trigger: 'blur' },
        ],
        U_LoginPassword: [
            { required: true, message: '用户密码不能为空！', trigger: 'blur' },
        ],
        U_TrueName: [
            { required: true, message: '真实名称不能为空!', trigger: 'blur' },
        ],
        // UserRole: [
        //     {
        //     type: 'array',
        //     required: true,
        //     message: '至少选中一个角色',
        //     trigger: 'change',
        //     },
        // ],
        U_Birthday: [
            {
                type: 'date',
                required: true,
                message: '出生日期不能为空！',
                trigger: 'change',
            },
        ],
    })
    //按钮
    const submitForm = async (formEl: FormInstance | undefined) => {
        if (!formEl) return
        await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('数据效验成功，请执行修改操作!')
            axios.put("https://localhost:44377/api/User/UpdUserInfo",Info.value,
                {
                    params:{
                        roleList:Info.value.UserRole,
                    }
                }
            )
            .then(res=>{
                if(res.data.Data==-1)
                {
                    ElMessage.error("用户名称已经存在，请重新输入！")
                    return;
                }
                else if(res.data.Data>0)
                {
                    ElMessage.success("用户信息修改成功！")
                    router.push("/ShowUser");//跳转到显示页面
                }
                else
                {
                    ElMessage.error("用户信息修改失败！")
                    return;
                }
            })
        } else {
            console.log('数据参数错误，请检查!', fields)
        }
        })
    }
    //重置
    const resetForm = (formEl: FormInstance | undefined) => {
        if (!formEl) return
        formEl.resetFields()
    }
    
    const options = Array.from({ length: 10000 }).map((_, idx) => ({
        value: `${idx + 1}`,
        label: `${idx + 1}`,
    }))
</script>
  